<template>
  <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
    <div class="content_form">
      <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="120px">
        <el-form-item label="产品参数" prop="detailsMenuName">
          <el-input v-model="dataForm.detailsMenuName" placeholder="请输入产品参数" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addMenu,getMenu,updateMenu } from "@/api/product";

export default {
  name: "productAdd",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      dataForm: {
        detailsMenuName: '',
        detailsMenuId:undefined
      },
      // 表单校验
      dataRules: {
        detailsMenuName: [
          { required: true, message: '请输入产品参数', trigger: 'blur' },
        ],
      },
    }
  },
  methods:{
    init(e) {
      this.reset();
      this.open = true;
      this.title = e ? "编辑产品参数":"添加产品参数";
      this.dataForm.detailsMenuId = e || undefined
      if(e) return this.handleUpdate(e)
    },
    // 表单重置
    reset() {
      for (var key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key] = []
        } else {
          this.dataForm[key] = ''
        }
      }
      this.resetForm("ruleForm");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      getMenu(row).then(res => {
        const { code, data, msg } = res
        if (code != 200) return this.$modal.msgError(msg);
        this.dataForm = { ...data }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          const api = this.dataForm.detailsMenuId ? updateMenu(this.dataForm) : addMenu(this.dataForm)
          api.then(res => {
            const { code, msg } = res
            if(code !== 200) return this.$modal.msgError(msg);
            this.dataForm.detailsMenuId ? this.$modal.msgSuccess("修改成功") : this.$modal.msgSuccess("添加成功")
            this.open = false;
            this.$emit('eventUpdata')
          })
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  }
}
</script>
<style>
</style>
